<template>
  <div class="editor">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="wangEditor" name="first">
        <div style="border: 1px solid #ccc">
          <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
          />
          <Editor
            style="height: 500px; overflow-y: hidden"
            v-model="html"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="Quill" name="second">
        <quill-editor
          class="info-editor"
          v-model="content"
          ref="QuillEditor"
          :options="editorOption"
          style="height: 500px; overflow-y: hidden; backgroundcolor: #fff"
        >
        </quill-editor>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<style>
.el-main {
  padding-top: 0;
}
.el-main>div {
  height: 630px;
}
.ql-container {
  height: 630px;
}
.el-tabs,.ql-container {
  height: 580px;
}
.el-tabs__content {
  height: 580px;
  border-bottom: 1px solid #ccc;
}
</style>
<script>
import { quillEditor } from "vue-quill-editor";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

export default {
  data() {
    return {
      activeName: "first",
      editor: null,
      html: "Wang",
      toolbarConfig: {},
      editorConfig: { placeholder: "请输入内容..." },
      mode: "default", // or 'simple'
      content: "Quill",
    };
  },
  components: {
    quillEditor,
    Editor,
    Toolbar,
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
};
</script>

<style lang="scss">
.editor {
  width: 100%;
  height: 630px;
  background-color: #ffffff;
  padding: 20px;
}
</style>
